<script setup>
import { ref } from 'vue'
import 'animate.css'
import { useRouter } from 'vue-router';
const page = ref(1)
const rollPage = ref(null)
const bar = ref(null)
const pageChange = (idx) => {
  if (idx === page.value) return

  var barActive = bar.value.querySelector('.bar-active')
  if (page.value === 1) {
    rollPage.value.style.animation = 'fanye-right linear forwards 1s';
    setTimeout(() => {
      rollPage.value.style['z-index'] = - rollPage.value.style['z-index']
    }, 1000);
    page.value = 2
    barActive.style.transform = `translateX(100%)`;
  }
  else {
    page.value = 1
    rollPage.value.style['z-index'] = - rollPage.value.style['z-index']
    rollPage.value.style.animation = 'fanye-left linear forwards 1s';
    barActive.style.transform = `translateX(0%)`;
  }
}
defineExpose({
  pageChange
})
const data1 = ref([
  { idx: '01', text: '以政治建设为统领一、构建党建引领发展新格局。' },
  { idx: '02', text: '以深化教育教学改革为重点不断提升拔尖创新人才培养能力。' },
  { idx: '03', text: '以服务支撑发展为引领着力提升科研创新能力' },
  { idx: '04', text: '以人才强校为根本推进人才工作高质量发展。' }
])
const data2 = ref([
  { idx: '05', text: '以国际化战略为先导提升国际合作综合效能。' },
  { idx: '06', text: '以高效能治理为牵引优化顶层设计。' },
  { idx: '07', text: '以“五育井举”为导向全方位做好学生工作。' },
  { idx: '08', text: '以强化办学条件保障为支撑不断提升服务质量。' }
])
const data3 = ref([
  { idx: '01', text: '坚持以“百千万工程”为统领，推动城乡品质再提级。' },
  { idx: '02', text: '坚持以制造业当家为导向，推动产业质量再提档。' },
  { idx: '03', text: '坚持以绿美连平生态建设为引领，推动绿色发展再提效。' },
  { idx: '04', text: '坚持以乡村全面振兴为目标，推动农业农村再提质。' }
])
const data4 = ref([
  { idx: '05', text: '坚持以扩大内需为抓手，推动投资增长再提速。' },
  { idx: '06', text: '坚持以“融湾”“融深”为动力，推动发展环境再提优。' },
  { idx: '07', text: '坚持以增进民生福祉为根本，推动社会事业再提升。' },
  { idx: '08', text: '坚持以社会大局稳定为基础，推动安全保障再提标。' }
])
const router = useRouter()
const back = () => {
  router.push('/pre')
}
</script>
<template>
  <div class="frame">
    <div class="page" style="--init:-180deg;z-index: -10000;width: 39%;transform: rotateY(var(--init)) skewY(1deg);">
      <div class="face"></div>
      <div class="back" style="background-color: #fff;"></div>
    </div>
    <div class="page" style="--init:-175deg;z-index: -9000;
    --start:-10deg;--end:-170deg;">
      <div class="face"></div>
      <div class="back">
        <div class="bg leftlp">
        </div>
        <div class="lptitle">
          连平县<br>2024年工作安排
        </div>
        <BookText :data="data3" color="#1A9F86"></BookText>
      </div>

    </div>
    <div class="page" ref="rollPage" style="--init:-10deg;z-index: 8000;
    --start:-10deg;--end:-160deg;">
      <div class="face">
        <div class="bg rightlp">
        </div>
        <div class="right-title">
          <img src="../../assets/image/lptext.png" style="width: 42rem;height: 8.5rem;">
        </div>
        <BookText :data="data4" color="#1A9F86"></BookText>
      </div>
      <div class="back">
        <div class="bg leftsztu">
        </div>
        <div class="title">
          深圳技术大学<br>2024年工作安排
        </div>
        <BookText :data="data1"></BookText>
      </div>
    </div>
    <div class="page" style="--init:-5deg;z-index: 7000;
    --start:-5deg;--end:-150deg;width: 38.5%;transform: rotateY(var(--init)) skewY(0.5deg);">
      <div class="face">
        <div class="bg rightsztu">
        </div>
        <div class="right-title">
          <img src="../../assets/image/SZTUtext.png">
        </div>
        <BookText :data="data2"></BookText>
      </div>

      <div class="back"></div>
    </div>
    <div class="page" style="--init:0deg;z-index: 6000;
    --start:0deg;--end:-140deg;width: 40%;transform: rotateY(var(--init)) skewY(0.8deg);">
      <div class="face"></div>
      <div class="back"></div>
    </div>
    <div class="bar" ref="bar">
      <div class="bar-active"></div>
      <span class="bar-item" @click="pageChange(1)">县城所需</span>
      <span class="bar-item" @click="pageChange(2)">高校所能</span>
      <span class="bar-item" @click="back">返回首页</span>
    </div>

    <transition name="bg">
      <div class="bg" v-if="page === 1">
        <img src="../../assets/image/long.jpg" alt="">
      </div>
      <div class="bg" v-else>
        <img src="../../assets/image/sztubook.jfif" alt="">

      </div>
    </transition>
  </div>
</template>


<style lang="scss" scoped>
@import './PreBook.scss';
</style>
<style lang="scss">
@keyframes fanye-right {

  from {
    transform: rotateY(var(--start));
  }

  50% {
    transform: rotateY(-90deg) skew(0deg, -20deg) ;
  }

  to {
    transform: rotateY(var(--end));
  }
}

@keyframes fanye-left {

  from {
    transform: rotateY(var(--end));
  }

  50% {
    transform: rotateY(-90deg) skew(0deg, -20deg);
  }

  to {
    transform: rotateY(var(--start));
  }
}
</style>